<!--
 * @Description: 
 * @Description: 
 * @Version: 2.0
 * @Autor: LMJ
 * @Date: 2021-09-10 11:04:58
 * @LastEditors: LMJ
 * @LastEditTime: 2021-09-27 14:31:35
-->
<template>
  <div id="mains">
    <div id="Echar"></div>
  </div>
</template>

<script>
const echarts = require("echarts/lib/echarts");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/grid");
require("echarts/lib/component/legend");
require("echarts/lib/chart/bar");
var charts = {};
export default {
  data() {
    return {
      chartData: [120, 200, 150, 80, 75, 110, 530],
    };
  },
  created() {},
  mounted() {
    this.init();
    //根据浏览器宽度变化改变可视化报表图宽高
    window.addEventListener("resize", () => {
      charts.resize();
    });
  },
  methods: {
    init() {
      charts = echarts.init(document.getElementById("Echar"));
      charts.setOption({
        title: {
          text: "当天各片区产量",
          left: "center",
          top: "1.5%",
          textStyle: {
            color: "#06f1ef",
          },
        },
        xAxis: {
          type: "category",
          data: ["S1", "S2", "S3", "S4", "S5", "S6", "S7"],
          axisLine: {
            lineStyle: {
              color: "#06f1ef",
            },
          },
        },
        yAxis: {
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "#06f1ef",
            },
          },
        },
        grid: {
          left: "8%",
          right: "3%",
          top: "13%",
          bottom: "10%",
        },
        series: [
          {
            name: "水量消耗",
            data: this.chartData,
            type: "bar",
            stack: "total",
            label: {
              show: true,
              fontSize: 13,
              color: "#ffffff",
              fontWeight: "bold",
            },
            emphasis: {
              focus: "series",
            },
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      });
    },
  },
};
</script>

<style scoped lang="scss">
#mains {
  width: 100%;
  height: 100%;
  #Echar {
    width: 100%;
    height: 100%;
  }
}
</style>
